<template>
  <div class="bottom-bar-warpper flex-h fontsize20">
    <div
      class="baoche-btn flex-v flex-vc"
      @click="goTobcHome(true)"
    >
      <img :src="isHome?homeCheckedImg:homeUncheckImg">
      <div :class="isHome?'baseColorWithActive':''">包车</div>
    </div>
    <div
      class="myorder-btn flex-v flex-vc"
      @click="goTobcHome(false)"
    >
      <img :src="isHome?mrUncheckImg:mrCheckedImg">
      <div :class="isHome?'':'baseColorWithActive'">我的预约</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHome: true,
      homeCheckedImg: require('../assets/bcChecked.png'), // 底部栏包车选中图标
      homeUncheckImg: require('../assets/bcUncheck.png'), // 底部栏包车未选中图标
      mrCheckedImg: require('../assets/mrChecked.png'), // 底部栏我的预约选中图标
      mrUncheckImg: require('../assets/mrUncheck.png')// 底部栏我的预约未选中图标
    }
  },
  methods: {
    goTobcHome(bool) {
      this.isHome = bool
      if (bool) {
        // this.$router.go(-1)
        this.$emit('pageType', '包车', true, 'homepage')
      } else {
        // this.$router.push('/myreservation')
        this.$emit('pageType', '我的预约', false, 'myreservation')
      }
    }
  },
  mounted() {
    // document.addEventListener('resume', () => {
    //   console.log('this.isHome' + this.isHome)
    //   if (!this.isHome) {
    //     this.$router.push('/myreservation')
    //     this.$emit('pageType', '我的预约', false)
    //   } else {
    //     this.$emit('pageType', '包车', true)
    //   }
    // })
  }
}
</script>

<style>
.bottom-bar-warpper {
  position: absolute;
  width: 750px;
  height: 100px;
  bottom: 0;
  background-color: #fff;
  justify-content: space-around;
  box-shadow: 0 -3px 3px -1px #e8e9ea;
}
.baoche-btn,
.myorder-btn {
  widows: 375px;
  color: #8e8e93;
}
.baoche-btn > img,
.myorder-btn > img {
  width: 60px;
  height: 60px;
}
</style>
